<template>
    <div :id="id" :style="{ width: width, height: height }"></div>
</template>
<script setup>
import * as echarts from "echarts";
const props = defineProps({
    id: {
        type: String,
        default: "myChart",
    },
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
        default: "100%",
    },
    option: {
        type: Object,
        default: () => {},
    },
});
let myChart = null;
watch(props.option, () => {
    drawEcharts();
});
onMounted(() => {
    nextTick(()=>{    
        drawEcharts();
    })
});
function drawEcharts() {
    myChart = echarts.init(document.getElementById(props.id));
    let option = props.option;
    option && myChart.setOption(option);
}
</script>
<style></style>
